<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>面料辅料详细</title>
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
	<link rel='stylesheet prefetch' href='${pageContext.request.contextPath}/css/bootstrap/bootstrap.min.css'>
	<link href="${pageContext.request.contextPath}/css/common/page.css" rel="stylesheet">	
	<link rel='stylesheet prefetch' href='${pageContext.request.contextPath}/css/fabric/fabicdetailMain.css'>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/common/jquery-2.0.0.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/common/bootstrap.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/common/header_changeLi.js"></script>
	<script src="${pageContext.request.contextPath}/js/fabric/fabricPage.js"></script>
	<link rel='stylesheet prefetch' href='${pageContext.request.contextPath}/css/common/main_head.css'>
	<script src="${pageContext.request.contextPath}/js/common/liked_coll.js"></script>
</head>


<body>
	<!-- 顶部部分 -->
	<header>
		<div class="rightTop">
			<ul>
				<li><a href="#">登录</a></li>
				<li class="separator">|</li>
				<li><a href="#">注册</a></li>
				<li class="separator">|</li>
				<li><a href="login.html">个人中心</a></li>
			</ul>
		</div>
		<div class="headermenu">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">作品</a></li>
				<li><a href="#">设计师</a></li>
				<li><a href="#">品牌服装</a></li>
				<li><a href="#">服装企业</a></li>
				<li class="current"><a href="${pageContext.request.contextPath}/fabric/getFabricMain.do">面料</a></li>
				<li><a href="${pageContext.request.contextPath}/provider/providerInfo.do">供应商</a></li>
				<li><a href="${pageContext.request.contextPath}/information/information.do">资讯</a></li>
			</ul>
		</div>
		<div class="search">
			<input type="text" placeholder="我想找···" />
		</div>
	</header>
	
	<!-- 内容部分 -->
	<div class="content">
		<div class="container">
			<p class="c_title">位置：<a href="#">FCS</a> >> <a href="${pageContext.request.contextPath}/fabric/getFabricMain.do">面料</a> >> 面料详细信息</p>
			<div class="row">
				<div class="span12">
					<div class="span2">
						<div class="fabicProviderInfo">
							
						</div>
					</div>
					<div class="span8">
						<div class="fabicDetail">
							<div class="carousel slide" id="carousel-386079">

								<div class="carousel-inner">
									<div class="item active">
										<img alt="" src="${fabric.photo_url1}" />

									</div>
									<div class="item">
										<img alt="" src="${fabric.photo_url2}" />

									</div>
									<div class="item">
										<img alt="" src="${fabric.photo_url3}" />

									</div>
									<div class="item">
										<img alt="" src="${fabric.photo_url4}" />

									</div>
									<div class="item">
										<img alt="" src="${fabric.photo_url5}" />									
									</div>

								</div>
								<a data-slide="prev" href="#carousel-386079" class="left carousel-control">‹</a>
								<a data-slide="next" href="#carousel-386079" class="right carousel-control">›</a>
							</div>
						</div>
						<div class="fabicbtn">
							<a class="btn btn-primary c_button liked" data-toggle="button">喜欢（<span
							class="sliked">${fabric.liked}</span>）</a>
							<a class="btn btn-primary c_button coll" data-toggle="button">收藏（<span class="scoll">${fabric.collected }</span>）</a>
						</div>
					</div>
					<div class="span2">
						<div class="fabicProviderInfo"></div>
					</div>
				</div>

				<div class="span12 matchInfo">
					<ul id="myTab" class="nav nav-tabs">
						<li class="active"><a href="#detailInfo" data-toggle="tab">
							详细信息</a>
						</li>
						<li><a href="#comment" data-toggle="tab">评论</a></li>
						<li><a href="#matchProduction" data-toggle="tab">匹配作品</a></li>
						<li><a href="#matchClothes" data-toggle="tab">匹配服装</a></li>
					</ul>
					<div id="myTabContent" class="tab-content">
						<div class="tab-pane fade in active fabric-content" id="detailInfo">
							<table class="table m_table">
								<tbody>
									<tr>
										<td>
											品名：${fabric.name}
										</td>
									
										
									
										<td>
											织法：${fabric.weave.name}
										</td>
									
										<td>
										
											工艺：<c:forEach items="${fabric.fabricApplications}" var="obj">${obj.value }/</c:forEach>
										</td>
										
									</tr>
									<tr>
										<td>
											用途：<c:forEach items="${fabric.fabricProductions}" var="obj">${obj.value }/</c:forEach>
										</td>
										
										<td>
											成份：${fabric.fabricComponent.name}
										</td>
										
										<td>
											tcx/tpx：${fabric.tcx}/${fabric.tpx}
										</td>
										
									</tr>
								</tbody>
							</table>
						</div>
						<div class="tab-pane fade fullComment" id="comment">
						
							<div class="span3">
								<img alt="140x140" src="images/a.jpg" class="img-circle" style="width:140px;height:140px; margin-left:20px;"/>
							</div>
							<div class="span9">
								<div class="fabicComment">
									<p class="commentWrap">欢迎发表评论</p>
									<input class="user_id" type="hidden" name="user_id" value="${user_id}">
									<input class="fabric_id" type="hidden" name="object_id" value="${fabric.id}">
									<input type="hidden" name="object_type" value="3">
									<textarea class="CommentMain" placeholder="请输入评论内容" name="content"></textarea>
									<button class="btn btn-info c_button commentbtn" id="commentbtn">发布</button>
								</div>
							</div>
							<input type="hidden" value="${fabric.photo_url1}" id="user_photoLink"/>
							<div id="afterCommentDiv"></div>
							<c:forEach items="${comments}" var="comments">
							
							<div class="span12">
							<div class="span3">
								<img alt="140x140" src="${comments.user.photo_link}" class="img-circle" style="width:100px;height:100px; margin-left:40px;"/>
							</div>
							<div class="span9">
								<p class="commentdetail">${comments.content}</p>
							</div>
							</div>
							</c:forEach>
							
							
						</div>
						<div class="tab-pane fade" id="matchProduction">
						<c:set var="i" value="0"></c:set>
						<c:forEach items="${designList}" var="design">
							<div class="span12 mProduction">
								<div class="span3">
									<img alt="140x140" src="${design.effect_url}" class="img-polaroid" style="width:140px;height:140px; margin-left:20px;"/>
								</div>
								<div class="span9">
									<table class="table">
										<tbody>
											<tr>
												<td>
													作品名称：${design.name}
												</td>
												<td>
													风格：${design.name}
												</td>
												<td>
													专辑：${design.special.name}
												</td>
											</tr>
											<tr>
												<td>
													面料：${fabric.name}
												</td>
												<td>
													款式：${patternList[i].value}
												</td>
												<td>
													色彩：${design.color}
												</td>
											</tr>
											<tr>
												<td>
													描述：${design.description}
												</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
							<c:set var="i" value="${i+1 }"></c:set>
							</c:forEach>
							<!--匹配作品分页-->
							<div class="paging">
							    <div style="display: none;">
								    <span class="pages">${json.property.pageCount}</span>  <!--页数-->  
							        <span class="pageIndex">${json.property.pageIndex}</span>  <!--当前页码-->  
							        <span class="pagesize">3</span>   <!--每页记录数-->  
							        <span class="hasNext">${json.property.hasNext}</span>   <!--是否有下一页(boolean)-->  
							        <span class="selfUrl">/fabric/getFabricById.do</span>    <!--请求action-->
							        <span class="commonUrl">${pageContext.request.contextPath}</span>   <!--绝对路径-->
							    	<span class="likedUrl">/liked/liked_obj.do</span><!--liked请求action-->										
									<span class="collectionUrl">/collection/collect_obj.do</span><!--collection请求action-->
									<span class="userId">${user_id}</span><!--用户ID-->	
									<span class="object_id">${fabric.id}</span><!--面料ID-->
									<span class="object_type">3</span><!--商品类型-->
											
							    </div>
							    <div class="showPaging">
							        <a class="prev" href="${pageContext.request.contextPath}/fabric/getFabricById.do?id=${fabric.id }&pageindex=${json.property.pageIndex-1 }&pagesize=3">
									上一页</a> 
								<select class="pageNum">
									<option value="0">请选择跳转的页数</option>
									<option value="1">第1页</option>
								</select> 
								<a class="next" href="${pageContext.request.contextPath}/demand/getDemand.do?id=${fabric.id }&pageindex=${json.property.pageIndex+1 }&pagesize=3">
									下一页</a>
							    </div>
							</div>
							<!--分页结束-->
						</div>
						<div class="tab-pane fade" id="matchClothes">
						<c:set var="i" value="0"></c:set>
						<c:forEach items="${clothingList}" var="clothing">
							<div class="span12 mClothes">
								<div class="span3">
									<img alt="140x140" src="${clothing.photo_url1 }" class="img-polaroid" style="width:140px;height:140px; margin-left:20px;"/>
								</div>
								<div class="span9">
									<table class="table">
										<tbody>
											<tr>
												<td>
													服装名称：${clothing.name}
												</td>
												<td>
													品牌：${brandList[i].name }
												</td>
												<td>
													货号：${clothing.no}
												</td>
											</tr>
											<tr>
												<td>
													服装企业名称：${enterpriseInfoList[i].name}
												</td>
											</tr>
											<tr>
												<td>
													联系人姓名：${enterpriseInfoList[i].link_name}
												</td>
												<td>
													联系人电话：${enterpriseInfoList[i].link_phone}
												</td>
											</tr>
											<tr>
												<td>
													企业地址：${enterpriseInfoList[i].address}
												</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
							<c:set var="i" value="${i+1 }"></c:set>
							</c:forEach>
							
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 页脚部分 -->
	<footer>
	</footer>
	
	<script>
		$(function(){
			$("img").each(function(){
				if($(this).attr('src') == null ){
					$(this).parent().attr('display',none);
				}
			});
			
			var userId = $(".user_id").attr("value"); 
			var fabric_id =$(".fabric_id").attr("value");
			
			console.log(fabric_id);
			console.log(userId);
			
			$("#commentbtn").click(function() {
				$("#comment-form").submit();
				var commentMain=$(".CommentMain").val();
				
				if(commentMain == ""){
					alert("请输入评论内容再提交！");
				}else{
					/* $.ajax({
						url:"${pageContext.request.contextPath}/comment/add_comment.do",
						data:{
							user_id:userId,
							object_id:fabric_id,
							object_type:"3",
							content:commentMain},
						 	"user_id=" + userId + "&object_id=" + fabric_id + "&object_type=" + 3 + "&content=" + commentMain, 
						success:function(data){
							alert("评论成功！！");
						},
						error:function(){
							alert("---------");
						}
					}); */
					$.post(
						"${pageContext.request.contextPath}/comment/add_comment.do",
						{
							user_id:userId,
							object_id:fabric_id,
							object_type:"3",
							content:commentMain},
						function(data){
							alert("评论成功！！");
							//location.reload();
							 $("#afterCommentDiv").before('<div class="span12">'
									+ '<div class="span3">'
									+ '<img alt="140x140" src="' + $("#user_photoLink") + '" class="img-circle" style="width:100px;height:100px; margin-left:40px;"/>'
									+ '</div>'
									+ '<div class="span9">'
									+ '<p class="commentdetail">' + commentMain + '</p>'
									+ '</div>'
									+ '</div>'); 
						}
					);
				}
			});
		})
	</script>
</body>
</html>